<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { Note } from '@/views/desktop/type'
import { update } from '@/api/desktop/NoteApi'
import { nowDateTime } from '@/utils/common'
import Vditor from 'vditor'
import 'vditor/dist/index.css'

let editTitle = ref(false)
let editContent = ref(false)
let content = ref('')

// 2. 获取DOM引用
const myVditor = ref()

let props = defineProps({
  note: {
    type: Note,
    default: {
      title: '标题',
      noteContentList: [
        {
          id: '1',
          content: '内容',
          sort: 1,
        },
      ],
      updateTime: '2021-01-01',
    },
  },
})

const editeTileClick = () => {
  editTitle.value = true
}
onMounted(() => {
  myVditor.value = new Vditor('review-editor', {
    height: '100%',
    width: '100%',
    lang: 'zh_CN',
    value: '## 哈哈\n就这样把\n好的',
    toolbarConfig: {
      hide: true,
      pin: true
    }
  })
})
const editeContentClick = () => {
  editContent.value = true
  setTimeout(() => {
    myVditor.value = new Vditor('my-vditor', {
      height: '100%',
      width: '100%',
      lang: 'zh_CN',
    })
  }, 50)
}
const setTitle = () => {
  update(props.note).then(() => {
    props.note.updateTime = nowDateTime()
    editTitle.value = false
  })
}
const setContent = () => {
  props.note?.noteContentList.push({ id: '1', content: content.value, sort: 1 })
}
const inputOnblur = () => {
  editTitle.value = false
}
const contentSave = () => {
  console.log(myVditor.value)
  // editContent.value = false
}
</script>

<template>
  <div class="bg-gray-300 rounded shadow-xl">
    <p
      class="text-2xl font-semibold ml-3 cursor-text flex flex-row mt-1"
      @dblclick="editeTileClick()"
    >
      <span v-if="!editTitle">{{ props.note.title }}</span>
      <el-input
        class="mt-1 mr-1"
        v-model="props.note.title"
        v-if="editTitle"
        :onblur="inputOnblur"
        @keyup.enter="setTitle"
      />
    </p>
    <p style="border: 1px solid white" class="w-full mt-1 mb-1"></p>

    <p
      @dblclick="editeContentClick()"
      class="bg-white rounded-xl m-2 overflow-y-auto cursor-text p-1"
    >
      <div id="review-editor"></div>

      <el-dialog
        v-model="editContent"
        :fullscreen="true"
        :show-close="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <div class="" style="width: 100%; height: 98%">
          <div id="my-vditor"></div>

          <span class="float-right mt-1">
            <el-button @click="editContent = false">取消</el-button>
            <el-button type="primary" @click="contentSave">确定</el-button>
          </span>
        </div>
      </el-dialog>
    </p>
    <p style="border: 1px solid white" class="w-full mt-1 mb-1"></p>
    <p class="text-right mr-2">{{ props.note.updateTime }}</p>
  </div>
</template>

<style scoped>
::v-deep(.el-dialog__header) {
  display: none;
}
::v-deep(.el-dialog__body) {
  width: 100%;
  height: 100%;
}
</style>
